<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>界面原型-食坛页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.6;
            background: #F5F5F5;
            margin: 0 auto;
            position: relative;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .heading {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
            color: #333;
        }
        .prototype-area {
            display: flex;
            gap: 20px;
        }
        .prototype-column {
            flex: 0 0 840px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .description-column {
            flex: 1;
        }
        .card {
            margin-bottom: 0;
            background: white;
            border: 1px solid #eee;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        .card-header {
            background: #FFF0F0;
            padding: 16px;
            border-bottom: 1px solid #FFE4E4;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #FF9898;
        }
        .card-content {
            padding: 16px;
        }
        .note {
            background: #FFFBE6;
            border: 1px solid #FFE58F;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 16px;
            color: #D48806;
        }
        .prototype-preview {
            max-width: 414px;
            margin: 0 auto;
            border: 1px solid #FFE4E4;
            box-shadow: 0 4px 16px rgba(255, 152, 152, 0.1);
            background: white;
            border-radius: 16px;
            overflow: hidden;
        }
        .prototype-nav {
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            color: white;
            padding: 12px 16px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 1px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .prototype-content {
            padding: 16px;
            min-height: 400px;
            position: relative;
            background: #FAFAFA;
        }
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            background: white;
            border-top: 1px solid #eee;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            height: 100%;
            color: #999;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .tab-item:hover {
            color: #FFB6C1;
        }
        .tab-item.active {
            color: #FF9898;
        }
        .tab-icon {
            font-size: 24px;
            margin-bottom: 2px;
        }
        .tab-text {
            font-size: 12px;
        }
        .requirement {
            margin-bottom: 20px;
            padding: 16px;
            background: #FFF0F0;
            border-radius: 8px;
        }
        .requirement:last-child {
            margin-bottom: 0;
        }
        .requirement-title {
            font-weight: 600;
            color: #FF9898;
            margin-bottom: 8px;
        }
        .requirement-desc {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
        .post-card {
            background: white;
            margin-bottom: 12px;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .post-header {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #FFE4E4;
        }
        .user-info {
            flex: 1;
        }
        .username {
            font-weight: 500;
            margin-bottom: 4px;
            color: #333;
        }
        .post-time {
            font-size: 12px;
            color: #999;
        }
        .more-actions {
            color: #999;
            font-size: 20px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .more-actions:hover {
            background: #f5f5f5;
        }
        .post-content {
            color: #333;
            margin-bottom: 12px;
            line-height: 1.6;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 12px;
        }
        .image-item {
            aspect-ratio: 1;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            border: 1px solid #eee;
            transition: all 0.3s ease;
        }
        .image-item:hover {
            border-color: #FFB6C1;
        }
        .topic-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .topic-tag {
            padding: 4px 12px;
            background: #FFF0F0;
            color: #FF9898;
            border-radius: 12px;
            font-size: 12px;
            transition: all 0.3s ease;
        }
        .topic-tag:hover {
            background: #FFE4E4;
            transform: translateY(-1px);
        }
        .interaction-bar {
            display: flex;
            gap: 16px;
            color: #666;
        }
        .interaction-item {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .interaction-item:hover {
            color: #FF9898;
        }
        .mode-switch {
            margin: 0 -16px 16px;
            padding: 0 16px;
            background: white;
        }
        .mode-switch-inner {
            display: flex;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .mode-option {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            border-radius: 20px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .mode-option.active {
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            color: white;
            box-shadow: 0 2px 8px rgba(255, 152, 152, 0.3);
        }
        .mode-option:not(.active) {
            background: #f5f5f5;
            color: #666;
        }
        .mode-option:not(.active):hover {
            background: #FFE4E4;
            color: #FF9898;
        }
        .publish-btn {
            position: fixed;
            right: 20px;
            bottom: 72px;
            width: 56px;
            height: 56px;
            background: linear-gradient(45deg, #FF9898, #FFB6C1);
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(255, 152, 152, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 99;
        }
        .publish-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 16px rgba(255, 152, 152, 0.4);
        }
        .comment-section {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f5f5f5;
        }
        .comment-item {
            margin-bottom: 8px;
            font-size: 14px;
        }
        .comment-user {
            color: #FF9898;
            font-weight: 500;
        }
        .comment-input-wrapper {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }
        .comment-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 20px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .comment-input:focus {
            outline: none;
            border-color: #FFB6C1;
            box-shadow: 0 0 0 3px rgba(255, 152, 152, 0.1);
        }
        .emoji-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .emoji-btn:hover {
            color: #FF9898;
        }
        .publish-header {
            margin: -16px -16px 16px;
            padding: 16px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .close-btn {
            color: #666;
            font-size: 20px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .close-btn:hover {
            background: #f5f5f5;
        }
        .publish-title {
            font-weight: 500;
        }
        .publish-action {
            color: #FF9898;
            font-size: 14px;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 16px;
            transition: all 0.3s ease;
        }
        .publish-action:hover {
            background: #FFF0F0;
        }
        .content-input {
            background: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .content-textarea {
            width: 100%;
            height: 120px;
            border: none;
            resize: none;
            font-size: 14px;
            outline: none;
            margin-bottom: 16px;
        }
        .image-upload {
            aspect-ratio: 1;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #ddd;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .image-upload:hover {
            border-color: #FFB6C1;
            background: #FFF0F0;
        }
        .topic-selector {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .topic-selector-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        .topic-selector-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .topic-option {
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .topic-option.selected {
            background: #FFF0F0;
            color: #FF9898;
        }
        .topic-option:not(.selected) {
            background: #f5f5f5;
            color: #666;
        }
        .topic-option:not(.selected):hover {
            background: #FFE4E4;
            color: #FF9898;
        }
        .create-topic {
            padding: 6px 16px;
            background: #f5f5f5;
            color: #666;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .create-topic:hover {
            background: #FFE4E4;
            color: #FF9898;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="heading">界面原型-食坛页面</div>
        
        

        <div class="prototype-area">
            <div class="prototype-column">
                <div class="card">
                    <div class="card-header">
                        <span>食坛页面 - 主页</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🍽️ 食坛
                            </div>
                            <div class="prototype-content">
                                <!-- 模式切换 -->
                                <div class="mode-switch">
                                    <div class="mode-switch-inner">
                                        <div class="mode-option active">主题广场</div>
                                        <div class="mode-option">饮食朋友圈</div>
                                    </div>
                                </div>

                                <!-- 主题广场内容 -->
                                <div style="margin: 0 -16px;">
                                    <div class="post-card">
                                        <div class="post-header">
                                            <div class="avatar">👤</div>
                                            <div class="user-info">
                                                <div class="username">美食达人</div>
                                                <div class="post-time">10分钟前</div>
                                            </div>
                                            <div class="more-actions">⋮</div>
                                        </div>
                                        <div class="post-content">今天的午餐很丰盛，和同事一起去了新开的日料店！#今日午餐打卡 #美食探店</div>
                                        <div class="image-grid">
                                            <div class="image-item">图片1</div>
                                            <div class="image-item">图片2</div>
                                            <div class="image-item">图片3</div>
                                        </div>
                                        <div class="topic-tags">
                                            <div class="topic-tag">#今日午餐打卡</div>
                                            <div class="topic-tag">#美食探店</div>
                                        </div>
                                        <div class="interaction-bar">
                                            <div class="interaction-item">❤️ 2.3k</div>
                                            <div class="interaction-item">💬 1.2k</div>
                                            <div class="interaction-item">🔄 分享</div>
                                        </div>
                                    </div>

                                    <div class="post-card">
                                        <div class="post-header">
                                            <div class="avatar">👤</div>
                                            <div class="user-info">
                                                <div class="username">夜宵控</div>
                                                <div class="post-time">30分钟前</div>
                                            </div>
                                            <div class="more-actions">⋮</div>
                                        </div>
                                        <div class="post-content">深夜放毒！这家烧烤太香了，推荐大家来尝试~ #深夜食堂 #美食探店</div>
                                        <div class="image-grid">
                                            <div class="image-item">图片</div>
                                        </div>
                                        <div class="topic-tags">
                                            <div class="topic-tag">#深夜食堂</div>
                                            <div class="topic-tag">#美食探店</div>
                                        </div>
                                        <div class="interaction-bar">
                                            <div class="interaction-item">❤️ 1.8k</div>
                                            <div class="interaction-item">💬 800</div>
                                            <div class="interaction-item">🔄 分享</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 发布按钮 -->
                                <div class="publish-btn">+</div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </div>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>食坛页面 - 主题广场详情</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🍽️ 食坛 - 主题广场详情
                            </div>
                            <div class="prototype-content">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="font-size: 18px; font-weight: 500; margin-right: auto;">主题广场 - #今日午餐打卡</div>
                                    <div style="font-size: 14px; color: #666; cursor: pointer;">返回</div>
                                </div>

                                <!-- 帖子列表 -->
                                <div class="post-card">
                                    <div class="post-header">
                                        <div class="avatar">👤</div>
                                        <div class="user-info">
                                            <div class="username">美食达人</div>
                                            <div class="post-time">10分钟前</div>
                                        </div>
                                        <div class="more-actions">⋮</div>
                                    </div>
                                    <div class="post-content">今天的午餐很丰盛，和同事一起去了新开的日料店！#今日午餐打卡 #美食探店</div>
                                    <div class="image-grid">
                                        <div class="image-item">图片1</div>
                                        <div class="image-item">图片2</div>
                                        <div class="image-item">图片3</div>
                                    </div>
                                    <div class="topic-tags">
                                        <div class="topic-tag">#今日午餐打卡</div>
                                        <div class="topic-tag">#美食探店</div>
                                    </div>
                                    <div class="interaction-bar">
                                        <div class="interaction-item">❤️ 12</div>
                                        <div class="interaction-item">💬 3</div>
                                        <div class="interaction-item">🔄 分享</div>
                                    </div>
                                    <!-- 评论区 -->
                                    <div class="comment-section">
                                        <div class="comment-item">
                                            <div style="display: flex; gap: 8px; margin-bottom: 12px;">
                                                <div class="avatar" style="width: 32px; height: 32px;">👤</div>
                                                <div style="flex: 1;">
                                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                                        <span class="comment-user">美食探店家</span>
                                                        <span class="post-time">5分钟前</span>
                                                    </div>
                                                    <div style="color: #333;">这家店我也去过，确实不错！他家的三文鱼刺身特别新鲜，强烈推荐！</div>
                                                    <div style="display: flex; gap: 16px; margin-top: 8px;">
                                                        <div class="interaction-item">❤️ 6</div>
                                                        <div class="interaction-item">💬 回复</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-item">
                                            <div style="display: flex; gap: 8px; margin-bottom: 12px;">
                                                <div class="avatar" style="width: 32px; height: 32px;">👤</div>
                                                <div style="flex: 1;">
                                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                                        <span class="comment-user">日料控</span>
                                                        <span class="post-time">8分钟前</span>
                                                    </div>
                                                    <div style="color: #333;">请问这家店在哪里呀？看起来很不错的样子！</div>
                                                    <div style="display: flex; gap: 16px; margin-top: 8px;">
                                                        <div class="interaction-item">❤️ 3</div>
                                                        <div class="interaction-item">💬 回复</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 回复 -->
                                            <div style="margin-left: 40px;">
                                                <div style="display: flex; gap: 8px;">
                                                    <div class="avatar" style="width: 32px; height: 32px;">👤</div>
                                                    <div style="flex: 1;">
                                                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                                            <span class="comment-user">美食达人</span>
                                                            <span class="post-time">3分钟前</span>
                                                        </div>
                                                        <div style="color: #333;">在市中心商圈的美食广场三楼，店名叫"寿司の物语"</div>
                                                        <div style="display: flex; gap: 16px; margin-top: 8px;">
                                                            <div class="interaction-item">❤️ 2</div>
                                                            <div class="interaction-item">💬 回复</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 评论输入框 -->
                                    <div class="comment-input-wrapper">
                                        <input type="text" placeholder="添加评论..." class="comment-input">
                                        <div class="emoji-btn">😊</div>
                                    </div>
                                </div>

                                <!-- 发布按钮 -->
                                <div class="publish-btn">+</div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </div>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>食坛页面 - 饮食朋友圈</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🍽️ 食坛 - 饮食朋友圈
                            </div>
                            <div class="prototype-content">
                                <!-- 模式切换 -->
                                <div class="mode-switch">
                                    <div class="mode-switch-inner">
                                        <div class="mode-option">主题广场</div>
                                        <div class="mode-option active">饮食朋友圈</div>
                                    </div>
                                </div>

                                <!-- 朋友圈动态 -->
                                <div style="margin: 0 -16px;">
                                    <div class="post-card">
                                        <div class="post-header">
                                            <div class="avatar">👤</div>
                                            <div class="user-info">
                                                <div class="username">小明</div>
                                                <div class="post-time">10分钟前</div>
                                            </div>
                                            <div class="more-actions">⋮</div>
                                        </div>
                                        <div class="post-content">今天和朋友一起打卡新开的日料店，味道不错！推荐大家来尝试~ #美食探店</div>
                                        <div class="image-grid">
                                            <div class="image-item">图片1</div>
                                            <div class="image-item">图片2</div>
                                            <div class="image-item">图片3</div>
                                        </div>
                                        <div class="topic-tags">
                                            <div class="topic-tag">#美食探店</div>
                                        </div>
                                        <div class="interaction-bar">
                                            <div class="interaction-item">❤️ 12</div>
                                            <div class="interaction-item">💬 3</div>
                                            <div class="interaction-item">🔄 分享</div>
                                        </div>
                                        <!-- 评论区 -->
                                        <div class="comment-section">
                                            <div class="comment-item">
                                                <span class="comment-user">小红</span>：看起来真不错，下次一起去！
                                            </div>
                                            <div class="comment-item">
                                                <span class="comment-user">小王</span>：这家店在哪里呀？
                                            </div>
                                            <div class="comment-input-wrapper">
                                                <input type="text" placeholder="添加评论..." class="comment-input">
                                                <div class="emoji-btn">😊</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 发布按钮 -->
                                <div class="publish-btn">+</div>

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </div>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <span>食坛页面 - 发布动态</span>
                    </div>
                    <div class="card-content">
                        <div class="prototype-preview">
                            <div class="prototype-nav">
                                🍽️ 食坛 - 发布动态
                            </div>
                            <div class="prototype-content">
                                <!-- 顶部导航 -->
                                <div class="publish-header">
                                    <div class="close-btn">×</div>
                                    <div class="publish-title">发布动态</div>
                                    <div class="publish-action">发布</div>
                                </div>

                                <!-- 发布模式切换 -->
                                <div class="mode-switch">
                                    <div class="mode-switch-inner">
                                        <div class="mode-option active">主题广场</div>
                                        <div class="mode-option">朋友圈</div>
                                    </div>
                                </div>

                                <!-- 内容输入 -->
                                <div class="content-input">
                                    <textarea class="content-textarea" placeholder="分享你的美食体验..."></textarea>
                                    <div class="image-grid">
                                        <div class="image-upload">
                                            <div style="color: #999; font-size: 24px;">+</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 话题选择 -->
                                <div class="topic-selector">
                                    <div class="topic-selector-title">添加话题标签</div>
                                    <div class="topic-selector-grid">
                                        <div class="topic-option selected">#今日午餐打卡</div>
                                        <div class="topic-option">#深夜食堂</div>
                                        <div class="topic-option">#家常菜分享</div>
                                        <div class="topic-option">#美食探店</div>
                                        <div class="topic-option">#创意料理</div>
                                        <div class="create-topic">+ 创建新话题</div>
                                    </div>
                                </div>

                                <!-- 发布按钮的位置为空，因为发布页面不需要发布按钮 -->
                                <!-- <div class="publish-btn">+</div> -->

                                <!-- 底部导航栏 -->
                                <div class="tab-bar">
                                    <a href="index.html" class="tab-item">
                                        <div class="tab-icon">🏠</div>
                                        <div class="tab-text">首页</div>
                                    </a>
                                    <a href="records.html" class="tab-item">
                                        <div class="tab-icon">🌾</div>
                                        <div class="tab-text">粮仓</div>
                                    </a>
                                    <div class="tab-item active">
                                        <div class="tab-icon">🍽️</div>
                                        <div class="tab-text">食坛</div>
                                    </div>
                                    <a href="profile.html" class="tab-item">
                                        <div class="tab-icon">👤</div>
                                        <div class="tab-text">我的</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="description-column">
                <div class="card">
                    <div class="card-header">
                        <span>社区模块功能需求</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">1. 主题广场</div>
                            <div class="requirement-desc">
                                <p>- 热门话题展示和参与讨论</p>
                                <p>- 支持图文混合发布，最多9张图片</p>
                                <p>- 话题标签系统，便于内容分类</p>
                                <p>- 热门话题排行榜和趋势分析</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">2. 饮食朋友圈</div>
                            <div class="requirement-desc">
                                <p>- 好友动态实时更新和互动</p>
                                <p>- 支持评论、点赞、分享功能</p>
                                <p>- 私密性设置，可选择可见范围</p>
                                <p>- 智能推荐相似饮食习惯的用户</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">3. 发布功能</div>
                            <div class="requirement-desc">
                                <p>- 支持快速发布图文动态</p>
                                <p>- 丰富的话题标签选择</p>
                                <p>- 图片编辑和滤镜功能</p>
                                <p>- 定位打卡和美食地图</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 添加社区互动指南 -->
                <div class="card">
                    <div class="card-header">
                        <span>社区互动指南</span>
                    </div>
                    <div class="card-content">
                        <div class="requirement">
                            <div class="requirement-title">发布优质内容</div>
                            <div class="requirement-desc">
                                <p>- <strong>图片质量</strong>：选择光线充足的环境拍摄</p>
                                <p>- <strong>文字描述</strong>：详细描述食材、口感和用餐体验</p>
                                <p>- <strong>标签使用</strong>：选择2-3个相关度高的标签</p>
                                <p>- <strong>互动回复</strong>：积极回应评论，促进交流</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">社区礼仪规范</div>
                            <div class="requirement-desc">
                                <p>- <strong>友善交流</strong>：保持积极正面的互动氛围</p>
                                <p>- <strong>原创优先</strong>：鼓励分享原创美食体验</p>
                                <p>- <strong>适度发布</strong>：控制发布频率，避免刷屏</p>
                                <p>- <strong>隐私保护</strong>：注意保护个人和他人隐私</p>
                            </div>
                        </div>

                        <div class="requirement">
                            <div class="requirement-title">内容推荐机制</div>
                            <div class="requirement-desc">
                                <p>- <strong>热度计算</strong>：基于点赞、评论、分享等数据</p>
                                <p>- <strong>时效性</strong>：优先展示近期活跃内容</p>
                                <p>- <strong>个性化</strong>：根据用户兴趣智能推荐</p>
                                <p>- <strong>多样性</strong>：保证不同类型内容的展示机会</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 添加社区数据分析 -->
                <div class="card">
                    <div class="card-header">
                        <span>社区数据分析</span>
                    </div>
                    <div class="card-content">
                        <div style="margin-bottom: 16px;">
                            <div style="font-weight: 500; margin-bottom: 8px;">热门话题分布</div>
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">今日午餐打卡</span>
                                        <span style="font-size: 14px; color: #FF9898;">38%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 38%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">美食探店</span>
                                        <span style="font-size: 14px; color: #FF9898;">32%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 32%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 14px;">家常菜分享</span>
                                        <span style="font-size: 14px; color: #FF9898;">30%</span>
                                    </div>
                                    <div style="height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
                                        <div style="width: 30%; height: 100%; background: #FF9898;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div style="font-weight: 500; margin-bottom: 8px;">用户活跃度分析</div>
                            <div style="background: #FFF0F0; padding: 12px; border-radius: 8px;">
                                <p style="margin: 0; font-size: 14px; color: #666; margin-bottom: 8px;">社区活跃度统计：</p>
                                <ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #666;">
                                    <li>日均发布动态：3.5条/人</li>
                                    <li>平均互动率：85%</li>
                                    <li>内容完成度：92%</li>
                                    <li>用户留存率：78%</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <span>设计说明</span>
        </div>
        <div class="card-content">
            <div class="note">
                <strong>设计说明：</strong> 食坛页面实现了社区模块功能，提供了主题广场和饮食朋友圈两个子模块，支持用户分享和交流饮食体验。
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <span>数据库表设计</span>
        </div>
        <div class="card-content">
            <div class="requirement">
                <div class="requirement-title">1. 帖子表 (posts)</div>
                <div class="requirement-desc">
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">content</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">500</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">任意文字</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">images</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">JSON</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">图片URL数组["oss.com/img1.jpg",...]</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">latitude</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DECIMAL(10,6)</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">纬度坐标</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">longitude</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DECIMAL(10,6)</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">经度坐标</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">visibility</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">ENUM</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">public/friend/private</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">author_name</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">VARCHAR</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">20</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">冗余字段，缓存users.username</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除user_id的物理外键约束，在应用层实现以下逻辑：</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 发帖时校验user_id是否存在</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 用户注销时级联删除其帖子（需手动实现）</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">3. 添加author_name冗余字段加速查询，避免频繁联表</p>
                </div>
            </div>

            <div class="requirement">
                <div class="requirement-title">2. 评论表 (comments)</div>
                <div class="requirement-desc">
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">content</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">文本</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">≤200</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">任意文字</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">target_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联posts表或food_records表</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">target_type</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">枚举</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">post/food_record</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">reply_to_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联comments表的id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除物理外键约束，在应用层实现以下逻辑：</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 评论前校验用户、目标内容和回复的评论是否存在</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 删除内容或评论时，级联删除相关评论</p>
                </div>
            </div>

            <div class="requirement">
                <div class="requirement-title">3. 点赞表 (拆分为两个表)</div>
                <div class="requirement-desc">
                    <p style="margin-bottom: 10px;"><strong>3.1 帖子点赞表 (post_likes)</strong></p>
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">post_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联posts表</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    
                    <p style="margin-bottom: 10px; margin-top: 20px;"><strong>3.2 评论点赞表 (comment_likes)</strong></p>
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">user_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">comment_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联comments表</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除物理外键约束，在应用层实现以下逻辑：</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 点赞时校验用户和帖子/评论是否存在</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 删除帖子/评论时，同步删除关联点赞记录</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">3. 保留联合主键防止重复点赞</p>
                </div>
            </div>

            <div class="requirement">
                <div class="requirement-title">4. 用户关系表 (user_relations)</div>
                <div class="requirement-desc">
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">follower_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">following_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联users.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除物理外键约束，在应用层实现以下逻辑：</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 关注操作前校验用户是否存在</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 用户注销时删除其关注/粉丝记录</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">3. 建议使用Redis缓存用户关系，减少数据库压力</p>
                </div>
            </div>

            <div class="requirement">
                <div class="requirement-title">5. 话题表 (topics)</div>
                <div class="requirement-desc">
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">name</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">2-20</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">话题名称，汉字字母</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">是</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">description</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">文本</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">≤100</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">话题描述</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">icon</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">选填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">≤50</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">话题图标，emoji或图片URL</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">post_count</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">≥0</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">帖子数量，默认0</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">created_at</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">DEFAULT CURRENT_TIMESTAMP</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">否</td>
                        </tr>
                    </table>
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* post_count为冗余字段，加速查询</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 建议每天定时更新post_count，或在每次帖子新增/删除时更新</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 高频访问场景优先使用post_count，低频场景可通过SELECT COUNT查询</p>
                </div>
            </div>

            <div class="requirement">
                <div class="requirement-title">6. 帖子话题关联表 (post_topic_relations)</div>
                <div class="requirement-desc">
                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr style="background: #f5f5f5;">
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">字段名称</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">必填/选填</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">类型</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">长度限制</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">输入规则</th>
                            <th style="padding: 8px; border: 1px solid #ddd; text-align: left;">是否唯一</th>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">post_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联posts.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                        <tr>
                            <td style="padding: 8px; border: 1px solid #ddd;">topic_id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">必填</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">整数</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">-</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">逻辑外键，关联topics.id</td>
                            <td style="padding: 8px; border: 1px solid #ddd;">联合主键</td>
                        </tr>
                    </table>
                    <p style="color: #666; font-style: italic; margin-top: 10px;">* 移除物理外键约束，在应用层实现以下逻辑：</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">1. 关联时校验post_id和topic_id是否存在</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">2. 删除帖子或话题时，同步删除对应的关联记录</p>
                    <p style="color: #666; font-style: italic; margin-left: 15px;">3. 新增或删除关联记录时，更新topics表中的post_count</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 